<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
            color: black;
            font-weight: bold;
        }
        .slide {
            position: relative;
            margin: auto;
            width: 498px;
            height: 280px;
            text-align: center;
            color: #FFF;
            overflow: hidden;
        }

        .slide ul {
            margin: 10px 0;
            padding: 0;
            width: calc(600px * 3);
            transition: all 0.5s;
        }

        .slide li {
            float: left;
            width: 498px;
            height: 280px;
            list-style: none;
            line-height: 200px;
            font-size: 36px;
        }

        .slide li:nth-child(1) {
            background-image: url("img/1.jpg");
            background-size: contain;
        }

        .slide li:nth-child(2) {
            background-image: url("img/2.jpg");
            background-size: contain;
        }

        .slide li:nth-child(3) {
            background-image: url("img/3.jpg");
            background-size: contain;
        }

        .slide input[name="sildeInput"] {
            display: none;
        }

        .slide label[for^="sildeInput"] {
            position: absolute;
            top: 170px;
            width: 20px;
            height: 20px;
            margin: 0 10px;
            line-height: 20px;
            color: #FFF;
            background: green;
            cursor: pointer;
        }


        .slide label[for="sildeInput1"] {
            left: 400px;
            top: 250px;
        }

        .slide label[for="sildeInput2"] {
            left: 430px;
            top: 250px;
        }

        .slide label[for="sildeInput3"] {
            left: 460px;
            top: 250px;
        }


        #sildeInput1:checked~ul {
            margin-left: 0;
        }

        #sildeInput2:checked~ul {
            margin-left: -498px;
        }

        #sildeInput3:checked~ul {
            margin-left: -996px;
        }

        #sildeInput1:checked~label[for="sildeInput1"] {
            color: #000;
            background: #fff;
        }

        #sildeInput2:checked~label[for="sildeInput2"] {
            color: #000;
            background: #fff;
        }

        #sildeInput3:checked~label[for="sildeInput3"] {
            color: #000;
            background: #fff;
        }

    /*  作业1  */



        .w2{
            width: 240px;
            height: 245px;
            background-image: url("https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/56b5d2b94458dedf75d696a8cad8a997.png");
            margin: 0 auto;
        }

        .list-color{
            color: #E33333;
        }

        .list-color2{
            color: #999;
        }
        .w2 ul{
            width: 190px;
            height: 73px;
            margin-left: 20px;
            cursor: pointer;
        }
        .li-style{
            list-style: none;
            font-size: 12px;
        }
        .list-font{
            font-size: 20px;
            font-weight: bolder;
        }
        .fr{
            float: right;
            width: 10px;
            position: relative;
            top: -55px;
            cursor: pointer;
        }
        .fr:hover{
            color: #E33333;
        }
    /*  作业2  */

        .w3{
            width: 132px;
            margin: 0 auto;
        }

        .w3 button{
            width: 132px;
            height: 36px;
            background-color: white;
            outline: none;
            border: 1px solid #eeeeee;
        }
        .w3 button a{
            position: relative;
            top: -6px;
            color: #E1251B;
            font-size: 12px;
            text-decoration: none;
        }
        .w3 button span{
            display: inline-block;
            width: 20px;
            height: 15px;
            color: white;
            text-align: center;
            line-height: 18px;
            border-radius: 10px;
            position: relative;
            top: -12px;
            left: -10px;
            background-color: #E1251B;
        }

    /* 作业3 */


        .w4{
            width: 60px;
            height: 200px;
            position: fixed;
            bottom: 40%;
            right: 30px;
            border: 1px solid #eeeeee;
        }

        .w4 ul{
            list-style: none;
        }
        .w4 ul li{
            height:60px ;
            border-bottom:1px solid #eeeeee ;
        }
        .w4 ul li:nth-of-type(4){
            border: none;
        }
        .w4 ul li a{
            display: inline-block;
            width: 60px;
            height: 60px;
            font-weight: normal;
            font-size: 14px;
            text-align: center;
            line-height: 60px;
        }
        .w4 ul li a:hover{
            background-color: #c81623;
            color: white;
        }
    </style>
</head>
<body>
<a href="#two" name="one"></a>
<div class="slide" style="margin-top: 80px;">

    <input type="radio" name="sildeInput" value="0" id="sildeInput1" checked hidden />
    <label for="sildeInput1">1</label>

    <input type="radio" name="sildeInput" value="1" id="sildeInput2" hidden />
    <label for="sildeInput2">2</label>

    <input type="radio" name="sildeInput" value="1" id="sildeInput3" hidden />
    <label for="sildeInput3">3</label>


    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<div style="height: 800px;"></div>

<a href="#one" name="two"></a>

<div class="w2">
        <ul class="li-style">
            <li class="list-color">￥<span class="list-font">1000</span></li>
            <li class="list-color2">满5999元可用</li>
            <li>仅可购买自营欧米茄部分...</li>
            <li class="fr">更多好券</li>
        </ul>

        <ul class="li-style">
            <li class="list-color"><span class="list-font">9</span>折</li>
            <li class="list-color2">满10元可用</li>
            <li>仅可购买部分小家电商品...</li>
            <li class="fr">更多好券</li>
        </ul>

    <ul class="li-style">
        <li class="list-color">￥<span class="list-font">200</span></li>
        <li class="list-color2">满3000元可用</li>
        <li>仅可购买天梭部分...</li>
        <li class="fr">更多好券</li>
    </ul>


</div>

<div style="height: 800px;"></div>

<a href="#" name="three"></a>

<div class="w3">
    <button>
        <img width="25" src="img/gwc.png">
        <span>0</span>
        <a href="#three">我的购物车</a>
    </button>
</div>


<div class="w4">
    <ul>
        <li><a href="#one">轮播图</a></li>
        <li><a href="#two">领券中心</a></li>
        <li><a href="#three">购物车</a></li>
        <li><a href="#one">顶部</a></li>
    </ul>
</div>

<div style="height: 800px;"></div>
</body>
</html>